<template>
	<view :class="['container',$store.state.theme.themeType]"
		:style="{'padding-top': 'var(--status-bar-height)','--nav_color':$store.state.theme.navColor,'--background':$store.state.theme.background,'--color1':$store.state.theme.color1,'--color2':$store.state.theme.color2}">
		<view class="top">
			<text>书架</text>
			<view class="iconfont " @click="jumpImport()">
				<!-- <uni-icons type="plus" size="24"></uni-icons> -->
				导入txt
			</view>
		</view>
		<scroll-view :style="{'height':scroll_height+'px !important'}" :scroll-y="true">
			<view v-if="$store.state.data.novelList.filter(i=>i.status==1).length" style="height: 40rpx;"></view>
			<block v-for="i in $store.state.data.novelList" :keys="i.name+'/'+i.author">
				<view class="item" v-if="i.status==1" @click="jump(i)">
					<view class="left">
						<image class="cover" style="z-index: 2;" :src="i.image" mode="aspectFit"></image>
						<image class="cover" style="z-index: 1;" src="../../static/cover.jpeg" mode="aspectFit">
						</image>
					</view>

					<view class="right">
						<view class="name">
							{{i.name}}
						</view>

						<view class="author">
							作者:{{i.author}}
						</view>

						<view class="lastest">
							最新:{{i.lastestchapter||'无'}}
						</view>
					</view>

					<view class="surplus">
						{{i.total==0?'未':(i.total-i.currentchapters)==0?'完':(i.total-i.currentchapters)<=99?(i.total-i.currentchapters):'99+'}}
					</view>
				</view>
			</block>

			<view v-if="$store.state.data.novelList.filter(i=>i.status==1).length==0" :style="{'height':scroll_height+'px !important'}"
				class="empty">
				<image src="../../static/empty.png" mode=""></image>
			</view>

		</scroll-view>

	</view>
</template>

<script>
	import {
		getList
	} from '../../api/index.js'
	import {
		getSystem
	} from 'api/system.js'
	import Slider from '../../components/slider.vue'
	import {
		RpxToPx,
		PxToRpx
	} from "../../utils/index.js"
	export default {
		components: {
			Slider
		},
		data() {
			return {
				keyword: null,
				List: [],
				listQuery: {
					page: 1,
					limit: 10
				},
				scroll_height: 0
			};
		},
		created() {
			this.scroll_height = getApp().globalData.screenHeight - 86 - 2 * parseInt(this.RpxToPx(20)) - getApp()
				.globalData.statusBarHeight
			getSystem({
				'name': 'notice'
			}).then(res => {
				let r = res[0]
				r.content = JSON.parse(r.content)
				if (r.content.time != uni.getStorageSync('notice')) {
					uni.setStorageSync('notice', r.content.time)
					uni.showModal({
						title: '公告',
						content: r.content.content,
					});
				}
			})
			//#ifdef APP
			getSystem({
				'name': 'update'
			}).then(res => {
				if (res[0].content != plus.runtime.version) {
					getSystem({
						'name': 'update_des'
					}).then(des => {
						uni.showModal({
							title: `${plus.runtime.version}-->${res[0].content}`,
							content: des[0].content,
							success: function(res) {
								if (res.confirm) {
									getSystem({
										'name': 'update_url'
									}).then(res => {
										var dtask = plus.downloader.createDownload(res[
												0]
											.content, {},
											function(d, status) {
												if (status == 200) { // 下载成功  
													plus.runtime.install(plus.io
														.convertLocalFileSystemURL(
															d
															.filename));
												} else { //下载失败 
													plus.downloader.clear();
												}
											})
										dtask.start()
										uni.showToast({
											icon: "none",
											title: "下载完成将自动安装"
										})
									})
								}
							}
						});

					})

				}else{
					uni.showToast({
						icon:'none',
						title:"最新版本！"
					})
				}
		
			})

			//#endif


		},
		methods: {
			jumpImport(){
				uni.navigateTo({
					url:"../importNovel/importNovel"
				})
			},
			jumpSearch() {
				uni.navigateTo({
					url: "../search/search"
				})
			},
			load(i) {
				this.$set(i, 'is_load', true)
			},
			jump(i) {
				uni.showLoading({
					mask: true
				})
				uni.setStorage({
					key: 'info',
					data: i,
					success() {
						uni.hideLoading()
						uni.navigateTo({
							url: "../index/index"
						})
					}
				})

			},
			PxToRpx(num) {
				return PxToRpx(num)
			},
			RpxToPx(num) {
				return RpxToPx(num)
			},
			scrolltolower() {
				this.listQuery.page += 1
				this.getList()
			}
		}
	}
</script>

<style lang="less">
	.container.dark {
		/deep/ .uni-searchbar__box {
			background-color: rgb(24, 24, 24) !important;
		}

		/deep/.uni-searchbar__cancel {
			color: white;
		}

		/deep/.uni-input-input {
			color: white;
		}

		/deep/.uni-icons {
			color: white !important;
		}

		/deep/.uni-input-placeholder {
			color: white !important;
		}
	}

	.container {
		background: var(--background);

		.top {
			height: 56px;
			display: flex;
			justify-content: center;
			align-items: center;
			background: var(--background);
			box-shadow: 0rpx 10rpx 15rpx var(--color1), 0rpx 0rpx 0rpx var(--color1);

			.iconfont {
				font-size: 26rpx;
				color: #35a9fc;
				position: absolute;
				right: 10px;
			}
		}

		.empty {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.item {
			display: flex;
			margin: 40rpx 40rpx;
			margin-top: 0;
			padding: 10rpx;
			border-radius: 16rpx;
			background-color: var(--background) !important;
			box-shadow: 10rpx 10rpx 15rpx var(--color1),
				-10rpx -10rpx 15rpx var(--color2);
			height: 200rpx;
			position: relative;

			.surplus {
				position: absolute;
				background-color: var(--background) !important;
				box-shadow: 10rpx 10rpx 15rpx var(--color1),
					-10rpx -10rpx 15rpx var(--color2);
				color: var(--color-main);
				right: 10rpx;
				bottom: 10rpx;
				font-size: 24rpx;
				height: 40rpx;
				padding: 5rpx 20rpx;
				line-height: 40rpx;
				border-radius: 9999px;
				text-align: center;

			}

			.left {
				width: 150rpx;

				/deep/div {
					background-size: 100% 100% !important;
				}

				.none {
					display: none;
				}

				.cover {
					position: absolute;
					height: 200rpx;
					width: 150rpx;
					box-sizing: border-box;
					border-radius: 10rpx;

				}
			}

			.right {
				padding-left: 30rpx;
				flex: 1;

				.name {
					width: 430rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 32rpx;
					font-weight: bolder;
					padding: 20rpx 0;
				}

				.author {
					width: 430rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 24rpx;
				}

				.lastest {
					padding: 20rpx 0;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					font-size: 24rpx;
					width: 380rpx;
				}
			}
		}

	}
</style>
